<template>
    <div>
        <Category :show="show" />
        <el-card class="box-card">
            <div v-show="show == 0">
                <el-button icon="Plus" type="primary" @click="add"
                    :disabled="categoryStore.c3Id ? false : true">添加SPU</el-button>
                <el-table :data="tableData" border style="margin: 10px 0;">
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="spuName" label="SPU名称" align="center" width="180" />
                    <el-table-column prop="description" label="SPU描述" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="address" label="SPU操作" align="center" width="300">
                        <template #="{ row, $index }">
                            <el-button title="添加SKU" icon="plus" type="warning" size="small"
                                @click="addSKU(row)"></el-button>
                            <el-button icon="edit" type="primary" size="small" @click="edit(row)"
                                title="修改SPU"></el-button>
                            <el-button icon="view" type="info" size="small" @click="lookSku(row)"
                                title="查看SKU列表"></el-button>
                            <el-button icon="delete" type="danger" size="small" @click="deleteSpu(row)"
                                title="删除SPU"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 30, 40]" :background="true"
                    layout="prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange"
                    @current-change="load" />
            </div>

            <Spu ref="spuForm" v-show="show == 1" @handleChange="handleChange" />

            <Sku ref="skuForm" @handleChange="handleChange" v-show="show == 2" />

            <el-dialog v-model="dialogVisiable" title="SKU列表">
                <el-table border :data="SkuData">
                    <el-table-column label="SKU名字" prop="skuName"></el-table-column>
                    <el-table-column label="SKU价格" prop="price"></el-table-column>
                    <el-table-column label="SKU重量" prop="weight"></el-table-column>
                    <el-table-column label="SKU图片">
                        <template #="{ row, $index }">
                            <img :src="row.skuDefaultImg" style="width: 100px;height: 100px;">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>


        </el-card>
    </div>
</template>

<script setup lang="ts">
import Category from '@/components/Category/index.vue'
import Sku from './skuForm.vue'
import Spu from './spuForm.vue'
import { onBeforeUnmount, ref, watch } from 'vue'
import { reqHasSpu, reqSkuList,reqRemoveSpu } from '@/api/product/spu'
import useCategoryStore from '@/store/modules/category'
import type { HasSpuResponseData, SpuData, SkuInfoData, SkuData } from '@/api/product/spu/type'
import { ElMessage, ElMessageBox } from 'element-plus'

let show = ref<number>(0)
let pageNo = ref<number>(1)
let pageSize = ref<number>(5)
let total = ref<number>(0)
let tableData = ref<any>([])
let categoryStore = useCategoryStore()
let spuForm = ref<any>()
let skuForm = ref<any>()
let SkuData = ref<SkuData[]>([])
let dialogVisiable = ref<boolean>(false)

watch(() => categoryStore.c3Id, () => {
    tableData.value = []
    if (!categoryStore.c3Id) return;
    load()
})

const load = async (page = 1) => {
    pageNo.value = page
    let res: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
    if (res.code == 200) {
        tableData.value = res.data.records
        total.value = res.data.total
    }
}
const add = () => {
    show.value = 1
    spuForm.value.initAddSpuData(categoryStore.c3Id)
}
const addSKU = (row: SpuData) => {
    show.value = 2
    skuForm.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}
const edit = (row: SpuData) => {
    show.value = 1
    spuForm.value.initHasSpuData(row)
}
const deleteSpu = (row: SpuData) => {
    ElMessageBox.confirm(
        `你确定要删除属性${row.spuName}吗?`,
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let result = await reqRemoveSpu((row.id as number))
            if (result.code == 200) {
                //删除成功提示信息
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                });
                //再次获取已有的数据
                load(tableData.value.length > 1 ? pageNo.value : pageNo.value - 1)
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败'
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
const handleSizeChange = () => {
    load()
}
const handleChange = (obj: any) => {
    show.value = obj.flag
    if (obj.params == 'update') {
        //更新留在当前页
        load(pageNo.value)
    } else {
        //添加留在第一页
        load()
    }
}
const lookSku = async (row: SpuData) => {
    let res: SkuInfoData = await reqSkuList((row.id as number))
    if (res.code == 200) {
        SkuData.value = res.data
    }
    dialogVisiable.value = true
}
onBeforeUnmount(() => {
    categoryStore.$reset()
})
</script>

<style scoped lang="scss">
.box-card {
    margin: 10px 0;
}
</style>